<template>
	<view class="pageContainer" :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>target</view>
				<view>Number,String,Date</view>
				<view>无</view>
				<view>目标时间。必须是有效日期时间格式。暂停恢复后不会影响目标时间</view>
			</view>
			<view class="tr">
				<view>time</view>
				<view>Number</view>
				<view>无</view>
				<view>倒计时长，单位毫秒。暂停恢复后会以当前时间进行补量。与目标时间二选一，目标时间优先</view>
			</view>
			<view class="tr">
				<view>useMillisecond</view>
				<view>Boolean</view>
				<view>false</view>
				<view>开启毫秒单位计算及显示，未开启则以秒为单位</view>
			</view>
			<view class="tr">
				<view>millisecondDelay</view>
				<view>Number</view>
				<view>35</view>
				<view>开启毫秒单位后，每帧间隔毫秒数</view>
			</view>
			<view class="tr">
				<view>autoStart</view>
				<view>Boolean</view>
				<view>false</view>
				<view>自动开始。target或time发生变更则会重新开始</view>
			</view>
			<view class="tr">
				<view>useFinishText</view>
				<view>Boolean</view>
				<view>false</view>
				<view>倒计时结束后使用结束文本显示</view>
			</view>
			<view class="tr">
				<view>format</view>
				<view>String</view>
				<view>无</view>
				<view>自定义时间显示格式字符串，可用D、hh/h、mm/m、ss/s、ms</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>useTagStyle</view>
					<view>Boolean</view>
					<view>false</view>
					<view>开启tag样式，数值由组件vi-tag显示。</view>
				</view>
				<view class="appendix">
					<view>可使用format定义间隔符及各项值显示顺序，格式定义毫秒的，需开启useMillisecond进行毫秒单位渲染。</view>
					<view>不使用format定义则为内部定义基础格式，day、hour为0时不显示，不足十位补0。</view>
					<view class="color-error">开启tag样式须注意性能问题，特别是同时开启useMillisecond进行毫秒单位渲染。可增大millisecondDelay降低计算负担</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>tagSet</view>
					<view>Object</view>
					<view></view>
					<view>tag样式的定义，详细见vi-tag组件内</view>
				</view>
				<view class="appendix">
					<view>size：md</view>
					<view>type：primary</view>
					<view>color：无</view>
					<view>textColor：无</view>
					<view>borderColor：无</view>
					<view>backgroundColor：无</view>
					<view>radius：无</view>
					<view>shadow：无</view>
					<view>borderWidth：无</view>
					<view>borderType：无</view>
					<view>borderBox：false</view>
					<view>plain：false</view>
					<view>bold：false</view>
					<view>fontSize：无</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}
					<view>unitDay：天　默认时间单位天</view>
					<view>finish：已结束　结束文本</view>
				</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view></view>
				<view>时间值变更事件，每帧都会抛出。提交对象参数，包含属性day、hour、minute、second、millisecond、text</view>
			</view>
			<view class="tr">
				<view>@done</view>
				<view>事件</view>
				<view></view>
				<view>倒计时结束事件，无提交参数。如果启动时已超过目标时间或倒计时长为0，则会立即触发</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-countdown :time="毫秒数">&lt;/vi-countdown>`}}
			</view>
			<view class="py-sm">
				<view class="fbox H x-left">
					<text class="mr-lg">倒计时60秒</text>
					<vi-countdown ref="demo1" :time="60000" autoStart></vi-countdown>
					<view class="ml-md fbox">
						<vi-button size="sm" width="4em" :radius="empty" @click="pause('demo1')">暂停</vi-button>
						<vi-button size="sm" width="4em" :radius="empty" @click="start('demo1')">开始</vi-button>
					</view>
				</view>
			</view>
			<view class="py-sm">
				<view class="fbox H x-left">
					<text class="mr-lg">指定一小时</text>
					<vi-countdown ref="demo2" :target="nextTime" autoStart></vi-countdown>
					<view class="ml-md fbox">
						<vi-button size="sm" width="4em" :radius="empty" @click="pause('demo2')">暂停</vi-button>
						<vi-button size="sm" width="4em" :radius="empty" @click="start('demo2')">开始</vi-button>
					</view>
				</view>
			</view>
			<view class="py-sm">
				<view class="fbox H x-left">
					<text class="mr-lg">使用毫秒</text>
					<vi-countdown ref="demo3" :target="nextTime" autoStart useMillisecond></vi-countdown>
					<view class="ml-md fbox">
						<vi-button size="sm" width="4em" :radius="empty" @click="pause('demo3')">暂停</vi-button>
						<vi-button size="sm" width="4em" :radius="empty" @click="start('demo3')">开始</vi-button>
					</view>
				</view>
			</view>
			<view class="py-sm">
				<view class="fbox H x-left">
					<text class="mr-lg">自定义格式串</text>
					<vi-countdown ref="demo4" :target="nextTime" autoStart format="hh时mm分ss秒"></vi-countdown>
				</view>
			</view>
			<view class="py-sm">
				<view class="fbox H x-left">
					<text class="mr-lg">外部自定义样式</text>
					<vi-countdown ref="demo5" :target="nextTime" autoStart @change="onChange">
						<view class="fbox p-sm bg-error color-inverse"
							style="border-top-left-radius:0.5em;border-top-right-radius:0.5em;">
							<view class="">{{h}}</view>
							<text class="mx-sm">:</text>
							<view class="">{{m}}</view>
						</view>
						<view class="fbox py-e0p25 bg-warning color-inverse"
							style="border-bottom-left-radius:0.5em;border-bottom-right-radius:0.5em;">{{s}}</view>
					</vi-countdown>
				</view>
			</view>
			<view class="py-sm">
				<view class="fbox H x-left">
					<text class="mr-lg">开启tagStyle，默认</text>
					<vi-countdown ref="demo6" :target="nextTime" autoStart useTagStyle useMillisecond></vi-countdown>
				</view>
			</view>
			<view class="py-sm">
				<view class="mb-md">开启tagStyle+自定义格式串</view>
				<vi-countdown ref="demo7" :target="nextTime" autoStart useTagStyle useMillisecond format="D天hh时mm分ss秒ms"></vi-countdown>
			</view>
			<view class="py-sm">
				<view class="mb-md">使用格式串自定义顺序</view>
				<vi-countdown ref="demo8" :target="nextTime" autoStart useTagStyle format="hh时mm分ss秒/ D天" :tagSet="{plain:true}"></vi-countdown>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				empty:"",
				nextTime:"",
				d:0,
				h:0,
				m:0,
				s:0
			}
		},
		methods: {
			pause(name){
				this.$refs[name].pause()
			},
			start(name){
				this.$refs[name].start()
			},
			onChange(e){
				this.d = e.day;
				this.h = e.hour;
				this.m = e.minute;
				this.s = e.second;
			}
		},
		onLoad(){
			this.nextTime = Date.now() + 3600000
		}
	}
</script>

<style lang="scss" scoped>
.pageContainer{
	
}
</style>
